<template>
    <!-- 二维地图组件 -->
    <div class="map-2d">
        <div class="map-container" :id="mapId"></div>
    </div>
</template>
<script setup>
import { onMounted, onUnmounted, inject } from 'vue'
const mars2d = inject('mars2d')
const props = defineProps({
    /**
     * 地图容器ID
     */
    mapId: {
        type: String,
        required: true,
        default: 'mapContainer'
    },
    /**
     * 地图中心点
     */
    center: {
        type: Object,
        required: false,
        default: () => {
            return {
                lng: 117.240601,
                lat: 31.827107
            }
        }
    },
    /**
     * 地图缩放级别
     */
    zoom: {
        type: Number,
        required: false,
        default: 13
    },
    /**
     * 地图底图
     */
    basemaps: {
        type: Array,
        required: false,
        default: () => {
            return [
                {
                    name: '高德地图',
                    type: 'gaode',
                    layer: 'vec',
                    show: true
                }
            ]
        }
    }
})
const emit = defineEmits(['MapLoadSuccess'])
// 地图对象
let map = null

onMounted(() => {
    initMap()
})
onUnmounted(() => {
    distoryMap()
})
/**
 * 初始化地图
 */
const initMap = () => {
    distoryMap()
    // 创建三维地球场景
    map = new mars2d.Map(props.mapId ? props.mapId : 'mapContainer', {
        // crs: L.CRS.EPSG4326,
        zoom: props.zoom,
        center: props.center,
        minZoom: 3,
        maxZoom: 18,
        control: {
            scale: false,
            locationBar: false,
            zoom: false,
            toolBar: false,
            layers: false
        },
        copyright: false,
        basemaps: props.basemaps
    })
    console.log('创建地图======', map)
    console.log('创建地图======', props.mapId)
    emit('MapLoadSuccess', {
        map: map,
        status: true
    })
}
/**
 * 卸载地图
 */
const distoryMap = () => {
    console.log('销毁地图')
    if (map) {
        map.eachLayer(layers => {
            map.removeLayer(layers)
        })
        map.destroy()
        map = null
    }
}
</script>
<style lang="scss" scoped>
.map-2d {
    @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    .map-container {
        @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    }
}
</style>
